<template>
  <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-6">
    <md-tabs @change="$_onTabChange" immediate>
      <md-tab-pane class="content" name="scrollView0" label="Block - 1">
        <md-scroll-view ref="scrollView0" :scrolling-x="false" manual-init @refreshing="$_onRefresh(0)"
          @end-reached="$_onEndReached(0)">
          <md-scroll-view-refresh slot="refresh" slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
            :scroll-top="scrollTop" :is-refreshing="isRefreshing" :is-refresh-active="isRefreshActive">
          </md-scroll-view-refresh>
          <div v-for="i in list0" :key="i" class="scroll-view-list">
            <p class="scroll-view-item">{{`1 - ${i}`}}</p>
          </div>
          <md-scroll-view-more slot="more" :is-finished="isFinished">
          </md-scroll-view-more>
        </md-scroll-view>
      </md-tab-pane>
      <md-tab-pane class="content" name="scrollView1" label="Block - 2">
        <md-scroll-view ref="scrollView1" :scrolling-x="false" manual-init @refreshing="$_onRefresh(1)"
          @end-reached="$_onEndReached(1)">
          <md-scroll-view-refresh slot="refresh" slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
            :scroll-top="scrollTop" :is-refreshing="isRefreshing" :is-refresh-active="isRefreshActive">
          </md-scroll-view-refresh>
          <div v-for="i in list1" :key="i" class="scroll-view-list">
            <p class="scroll-view-item">{{`2 - ${i}`}}</p>
          </div>
          <md-scroll-view-more slot="more" :is-finished="isFinished">
          </md-scroll-view-more>
        </md-scroll-view>
      </md-tab-pane>
    </md-tabs>
  </div>
</template>

<script>
  import {
    Tabs,
    TabPane,
    ScrollView,
    ScrollViewRefresh,
    ScrollViewMore
  } from 'mand-mobile'

  export default {
    name: 'scroll-view-demo-6',
    /* DELETE */
    title: '手动初始化',
    titleEnUS: 'Manual initialization',
    message: '请在移动设备中扫码预览',
    messageEnUS: 'Please scan QR code and preview on mobile device',
    /* DELETE */
    components: {
      [Tabs.name]: Tabs,
      [TabPane.name]: TabPane,
      [ScrollView.name]: ScrollView,
      [ScrollViewRefresh.name]: ScrollViewRefresh,
      [ScrollViewMore.name]: ScrollViewMore,
    },
    data() {
      return {
        list0: 5,
        list1: 5,
        isFinished: false,
      }
    },
    methods: {
      $_onRefresh(index) {
        // async data
        setTimeout(() => {
          this[`list${index}`] += 5
          this.$refs[`scrollView${index}`].finishRefresh()
          this.$refs[`scrollView${index}`].reflowScroller()
        }, 2000)
      },
      $_onTabChange(tab) {
        console.log(tab.name)
        this.$refs[tab.name].init()
      },
      $_onEndReached(index) {
        if (this.isFinished) {
          return
        }
        // async data
        setTimeout(() => {
          this['list' + index] += 5
          if (this['list' + index] >= 20) {
            this.isFinished = true
          }
          this.$refs[`scrollView${index}`].finishLoadMore()
          this.$refs[`scrollView${index}`].reflowScroller()
        }, 1000)
      },
    },
  }
</script>
<style lang="less" scoped>
  .md-example-child-scroll-view-6 {
    background: #FFF;

    .content {
      height: 800px;
    }

    .md-tab-bar {
      box-shadow: 0 2px 8px #f0f0f0;
    }

    .scroll-view-item {
      padding: 30px 0;
      text-align: center;
      font-size: 32px;
      border-bottom: .5px solid #efefef;
    }

  }
</style>